<app-sub-window [title]="'PROJECT_NEW.TITLE' | translate" [winBtns]="['close']">
  <div class="window-inner">
    <div class="window-content">
      <div class="left">
        <div class="left-inner">
          <nz-steps [nzCurrent]="currentStep" nzDirection="vertical" nzSize="small">
            <nz-step [nzTitle]="'PROJECT_NEW.STEPS.SELECT_BOARD' | translate"></nz-step>
            <nz-step [nzTitle]="'PROJECT_NEW.STEPS.BASIC_SETTINGS' | translate"></nz-step>
            <nz-step [nzTitle]="'PROJECT_NEW.STEPS.CREATE_PROJECT' | translate" [nzIcon]="currentStep == 2 ? iconTemplate : null"></nz-step>
          </nz-steps>
          <ng-template #iconTemplate><i class="fa-duotone fa-solid fa-spinner-third"></i></ng-template>
        </div>
      </div>
      <div class="right">
        @if (currentStep == 0) {
        <div class="right-inner flex-start">
          <div class="search-box">
            <nz-input-group [nzSuffix]="suffixIconSearch" [nzSize]="'small'">
              <input nz-input [placeholder]="'PROJECT_NEW.BOARD.SEARCH' | translate" [(ngModel)]="keyword" (ngModelChange)="search()" />
            </nz-input-group>
            <ng-template #suffixIconSearch>
              @if(keyword.length > 0){
              <i class="fa-light fa-xmark" (click)="keyword='';search()"></i>
              } @else {
              <i class="fa-light fa-search"></i>
              }
            </ng-template>
            <div class="tag-list">
              @for (tag of tagListRandom; track tag) {
              <nz-tag (click)="keyword=tag;search()">{{ tag }}</nz-tag>
              }
            </div>
          </div>
          <div class="board-selector sscroll">
            @for (board of boardList; track board.name) {
            <div class="board ccenter btn" [ngClass]="{ selected: currentBoard == board, disabled: board.disabled }"
              (click)="selectBoard(board)">
              <div class="img-box">
                <img [src]="resourceUrl+'/imgs/boards/'+board.img" />
              </div>
              <div class="name">{{ board.nickname }}
                @if(board.disabled){
                <span>(dev)</span>
                }
              </div>
            </div>
            }
          </div>
          @if(currentBoard){
          <div class="desc-box">
            <div class="title">
              {{currentBoard.nickname}}
              <div class="doc btn link" (click)="openUrl(currentBoard.url)">
                {{ 'PROJECT_NEW.BOARD.READ_DOC' | translate }}
              </div>
            </div>
            <div class="content">{{ currentBoard.description }}</div>
          </div>
          }
        </div>
        } @else {
        <!-- 基本设定页面 -->
        <div class="right-inner">
          <div class="item">
            <div>{{ 'PROJECT_NEW.FORM.BOARD' | translate }}:</div>
            <nz-input-group [nzSuffix]="suffixIconSearch">
              <input class="board" nz-input [(ngModel)]="newProjectData.board.name" [disabled]="true" />
            </nz-input-group>
            <ng-template #suffixIconSearch>
              <i class="fa-light fa-at"></i>
            </ng-template>
            <nz-select [(ngModel)]="newProjectData.board.version">
              @for (version of boardVersionList; track version) {
              <nz-option [nzValue]="version" [nzLabel]="version"></nz-option>
              }
            </nz-select>
          </div>
          <div class="item">
            <div>{{ 'PROJECT_NEW.FORM.PROJECT_NAME' | translate }}:</div>
            <input nz-input [(ngModel)]="newProjectData.name" (ngModelChange)="checkPathIsExist()" />
            @if(showIsExist){
            <div class="error animate__animated animate__faster animate__fadeInDown">{{ 'PROJECT_NEW.FORM.NAME_EXISTS' | translate }}</div>
            }
          </div>
          <div class="item">
            <div>{{ 'PROJECT_NEW.FORM.SAVE_PATH' | translate }}:</div>
            <nz-input-group [nzAddOnAfter]="addOnAfterTemplate">
              <input nz-input [(ngModel)]="newProjectData.path" [disabled]="true" />
            </nz-input-group>
            <ng-template #addOnAfterTemplate>
              <div class="btn ccenter ffull" (click)="selectFolder()">
                <i class="fa-light fa-folder"></i>
              </div>
            </ng-template>
          </div>
        </div>
        }
      </div>
    </div>
    <div class="window-footer">
      <div class="btns">
        @if (currentStep == 0) {
        <button nz-button nzType="primary" (click)="nextStep()">
          {{ 'PROJECT_NEW.BUTTONS.NEXT' | translate }}
        </button>
        } @else {
        @if (currentStep == 1) {
        <button nz-button nzType="default" (click)="currentStep = 0">
          {{ 'PROJECT_NEW.BUTTONS.PREV' | translate }}
        </button>
        <button nz-button nzType="primary" [disabled]="showIsExist" (click)="createProject()">
          {{ 'PROJECT_NEW.BUTTONS.CREATE' | translate }}
        </button>
        }
        }
        @if (currentStep == 2) {
        <button nz-button nzType="default" nzLoading>
          {{ 'PROJECT_NEW.BUTTONS.CREATING' | translate }}
        </button>
        }
      </div>
    </div>
  </div>
</app-sub-window>